<template>
	<view>
		<view style="height: 88upx;"></view>
		<view class="top flex align-center justify-center justify-between">
			<view></view>
			<view class="top-search flex align-center justify-between">
				<input placeholder="输入关键字..." v-model="searchKey" :focus="true" />
				<text class="lg text-gray cuIcon-search" @tap="toInputResult"></text>
			</view>
			<image v-if="changePattern" src="/static/change1.png"></image>
			<image v-else src="/static/change2.png"></image>
		</view>
		<view class="search-con" v-if="0">
			<view class="search-title">
				热门搜索
			</view>
			<view class="flex align-center flex-wrap justify-between">
				<block v-for="(item,index) in hotSeachList">
					<view @click="toResult(item)" class="item">{{item.title}}</view>
				</block>
			</view>
		</view>
		<view class="search-con">
			<view class="search-title">
				猜你喜欢
			</view>
			<view class="flex align-center flex-wrap justify-between">
				<block v-for="(item,index) in redMoreGoodsList">
					<view @click="toResult(item)" class="item">{{item.title}}</view>
				</block>
				<view class="empty" v-if="redMoreGoodsList.length==0"> 搜一搜，找到你喜欢的商品</view>
			</view>
		</view>
	</view>
</template>

<script>
	var api = require('@/components/api.js');
	export default {
		data() {
			return {
				hotSeachList: [],
				redMoreGoodsList: [],
				searchKey: '',
				changePattern: true

			}
		},
		onLoad() {
			this.loadGetSeachList()
			this.loadRedMoreGoods()
		},
		methods: {
			//获取热门搜索关键词
			loadGetSeachList: function() {
				api.get({
					url: 'Website/GetSeachList',
					data: {},
					success: data => {
						console.log(JSON.stringify(data))
						if (data.ErrCode == 0) {
							this.hotSeachList = data.Response
						}
					}
				});
			},
			//获取热门搜索关键词
			loadRedMoreGoods: function() {
				api.get({
					url: 'Website/GetLikeGoods',
					data: {},
					success: data => {
						console.log(JSON.stringify(data))
						if (data.ErrCode == 0) {
							this.redMoreGoodsList = data.Response.slice(0, 21)
						}
					}
				});
			},
			toResult: function(item) {
				uni.navigateTo({
					url: "/module/good/goodsSearchResult/goodsSearchResult?key=" + item.title
				})
			},
			toInputResult: function() {
				uni.navigateTo({
					url: "/module/good/goodsSearchResult/goodsSearchResult?key=" + this.searchKey
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-con {
		margin-top: 30upx;
	}

	.empty {
		text-align: center;
		margin: 100rpx auto;
		font-size: 26rpx;
		color: #999;
	}

	.search-title {
		font-size: 36upx;
		color: #333333;
	}

	.search-con {
		padding: 0 20upx;
	}

	.item {
		width: 223upx;
		height: 61upx;
		background-color: #f5f6f7;
		border-radius: 29upx;
		text-align: center;
		line-height: 61upx;
		font-size: 26upx;
		color: #666666;
		margin-top: 20upx;
	}

	page {
		background-color: #fff;
	}

	.top {
		padding: 0 20upx;
		box-sizing: border-box;
	}

	.top image {
		width: 32upx;
		height: 32upx;
	}

	.top-search {
		width: 598upx;
		height: 56upx;
		background-color: #ffffff;
		border-radius: 27upx;
		border: solid 1upx #dddddd;
		padding: 0 26upx;
		box-sizing: border-box;
	}

	.top-search {
		font-size: 24upx;
	}

	.top {
		position: fixed;
		top: 0;
		z-index: 999;
		width: 100%;
		height: 88upx;
		background-color: $btn-bground;
	}

	.cuIcon-search {
		padding: 15upx;
	}
</style>